import { Component, Fragment} from 'react';
import TodoItem from './TodoItem'
import './style.css';

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list:[],
            inputValue: ''
        }
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleButtonClick = this.handleButtonClick.bind(this);
        this.handDelete = this.handDelete.bind(this);
    }

    handleInputChange(e) {
        this.setState({
            inputValue: e.target.value
        })
    }

    handleButtonClick(){
        // 注意在dom中需要把当前 TodoList 的this绑定过来
        if(this.state.inputValue === '') return 

        // 使用 setState 响应式数据
        this.setState({
            list:[...this.state.list, this.state.inputValue],
            inputValue: ''
        })
    }

    handDelete(index) {
        // 尽量不要直接修改state里面的数据，应该拷贝一个副本
        const list = [...this.state.list];
        list.splice(index,1);
        this.setState({list})
    }


    render () {
        return (
            // 不想再最外层包裹一层 div 使用 React.Fragment 包裹，就不会多产生一层
            <Fragment>
                <div>
                    <input value={this.state.inputValue} onChange={this.handleInputChange} />
                    <button style={{ background:'red', color:'#fff'}}  className='red-btn' onClick={this.handleButtonClick}>添加</button>
                </div>
                <ul>
                   {
                    this.state.list.map((item,index) => {
                        return (
                            <TodoItem 
                                delete={this.handDelete} 
                                key={index} 
                                content={item} 
                                index={index}
                            />
                        );
                        // return <li key={index} onClick={this.handDelete.bind(this,index)}>{item}</li>
                    })
                   }
                </ul>
            </Fragment>
        )
    }
}

export default TodoList;